<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>主页面</title>
		<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
	</head>
	<body>
		<!-- 页面 -->
		<div data-role="page" style="background-color: whitesmoke;" id="mypage" >
			<!-- 顶部导航及搜索 -->
			<div style="position: fixed;width: 100%;background-color: white;">
				<div style="margin-top: 1rem;">
						<div style="width: 70%;margin-left: 5%;float: left;">
							<form action="" method="">
								<input data-type="search" id="myFilter"/>
							</form>
						</div>
						<div style="float: left;">
							<div class="button1" style="border: 1px solid rgba(0,0,0,0);">
								<div style="margin-top: 0.25rem;width: 100%;height: auto;">
									<a href="send.html" class="buttona"style="color: white;
									font-size: 1rem;font-weight: 200;" 
									data-transition="pop">
										<i class="icon-bianji"></i>
										 发帖
									 </a>
								</div>
								
							</div>
						</div>
				</div>
					<div style="width: 100%;margin-left: -6%;">
						<ul class="tab" >
							<li onclick="$('.tab').on('click','li',function(){
    $(this).addClass('active').siblings().removeClass('active');
    var liIndex = $(this).index();
	
    $('.content').eq(liIndex).removeClass('hide').siblings('.content').addClass('hide');
  }) " class="active">日常</li>
							<li onclick="$('.tab').on('click','li',function(){
    $(this).addClass('active').siblings().removeClass('active');
    var liIndex = $(this).index();
	
    $('.content').eq(liIndex).removeClass('hide').siblings('.content').addClass('hide');
  }) ">寻物</li>
							<li onclick="$('.tab').on('click','li',function(){
    $(this).addClass('active').siblings().removeClass('active');
    var liIndex = $(this).index();
	
    $('.content').eq(liIndex).removeClass('hide').siblings('.content').addClass('hide');
  }) ">学习</li>
						</ul>
					</div>
			</div>
			<!-- 页面内容 -->
			<div data-role="main" style="margin-top: 6.5rem;margin-bottom: 4rem;color: black;">
				<!-- 日常页 -->
				<div class="content" id="div1">
					<table class="tablestyle" style="margin-top: 8rem;">
						<div style="margin-left: 10%;">
							<tr>
								<td class="td1">
									<div style="float: left;">
										<div style="height: 2.75rem;width: 2.75rem;border-radius: 1.375rem;overflow: hidden;">
											<img src="img/head.jpeg" width="100%" height="100%">
										</div>
									</div>
										<span style="float: left;margin: 0.55rem 0 0 0.3rem;font-family: arial black;font-size: 1.2rem;">花间一壶酒</span>
								</td>
							</tr>
							<tr><td class="td2"><p>天气真好！出来走走</p></td></tr>
							<tr><td class="td3"><a href="detail.html" data-transition="slide"><div style="width: 92%;"><img src="./img/demo.jpg" width="100%"></div></a></td></tr>
							<tr><td class="td4"><div style="height: 1.7rem;width: 4rem;border: 1px solid #ababab;border-radius: 0.9rem;text-align: center;padding-top: 1.5%;margin-top: 2%;">#日常</div></td></tr>
							<tr><td class="td5">
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-pinglun">3</span></div>
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-xihuan" style="color: red;">3</span></div> 
							</td></tr>
						</div>
						
					</table>
					<!-- table2 -->
					<table class="tablestyle">
						<div style="margin-left: 10%;">
							<tr>
								<td class="td1">
									<div style="float: left;">
										<div style="height: 2.75rem;width: 2.75rem;border-radius: 1.375rem;overflow: hidden;">
											<img src="img/head4.jpeg" width="100%" height="100%">
										</div>
									</div>
										<span style="float: left;margin: 0.55rem 0 0 0.3rem;font-family: arial black;font-size: 1.2rem;">Tom Query</span>
								</td>
							</tr>
							<tr><td class="td2"><p>那边风景独好</p></td></tr>
							<tr><td class="td3"><a href="#" data-transition="slide"><div style="width: 92%;"><img src="./img/demo6.jpg" width="100%"></div></a></td></tr>
							<tr><td class="td4"><div style="height: 1.7rem;width: 4rem;border: 1px solid #ababab;border-radius: 0.9rem;text-align: center;padding-top: 1.5%;margin-top: 2%;">#日常</div></td></tr>
							<tr><td class="td5">
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-pinglun">4</span></div>
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-xihuan" style="color: red;">20</span></div> 
							</td></tr>
						</div>
					</table>
				</div>
				<!-- 寻物页	 -->
				<div class="content hide" id="div2">
					<table class="tablestyle" style="margin-top: 8rem;">
						<div style="margin-left: 10%;">
							<tr>
								<td class="td1">
									<div style="float: left;">
										<div style="height: 2.75rem;width: 2.75rem;border-radius: 1.375rem;overflow: hidden;">
											<img src="img/head1.jpg" width="100%" height="100%">
										</div>
									</div>
										<span style="float: left;margin: 0.55rem 0 0 0.3rem;font-family: arial black;font-size: 1.2rem;">平凡之路</span>
								</td>
							</tr>
							<tr><td class="td2"><p>急寻耳机，长这个样子，如有捡到，联系QQ：1667698770，必有重谢</p></td></tr>
							<tr><td class="td3"><a href="#" data-transition="slide"><div style="width: 92%;"><img src="./img/demo2.jpg" width="100%"></div></a></td></tr>
							<tr><td class="td4"><div style="height: 1.7rem;width: 4rem;border: 1px solid #ababab;border-radius: 0.9rem;text-align: center;padding-top: 1.5%;margin-top: 2%;">#寻物</div></td></tr>
							<tr><td class="td5">
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-pinglun">1</span></div>
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-xihuan" style="color: red;">3</span></div> 
							</td></tr>
						</div>
						
					</table>
					<!-- table2 -->
					<table class="tablestyle">
						<div style="margin-left: 10%;">
							<tr>
								<td class="td1">
									<div style="float: left;">
										<div style="height: 2.75rem;width: 2.75rem;border-radius: 1.375rem;overflow: hidden;">
											<img src="img/head5.jpeg" width="100%" height="100%">
										</div>
									</div>
										<span style="float: left;margin: 0.55rem 0 0 0.3rem;font-family: arial black;font-size: 1.2rem;">章鱼小丸子</span>
								</td>
							</tr>
							<tr><td class="td2"><p>找钥匙链，大概长这样</p></td></tr>
							<tr><td class="td3"><a href="#" data-transition="slide"><div style="width: 92%;"><img src="./img/demo4.jpg" width="100%"></div></a></td></tr>
							<tr><td class="td4"><div style="height: 1.7rem;width: 4rem;border: 1px solid #ababab;border-radius: 0.9rem;text-align: center;padding-top: 1.5%;margin-top: 2%;">#寻物</div></td></tr>
							<tr><td class="td5">
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-pinglun">1</span></div>
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-xihuan" style="color: red;">3</span></div> 
							</td></tr>
						</div>
						
					</table>
				</div>
				<!-- 学习页 -->
				<div class="content hide" id="div3">
					<table class="tablestyle" style="margin-top: 8rem;">
						<div style="margin-left: 10%;">
							<tr>
								<td class="td1">
									<div style="float: left;">
										<div style="height: 2.75rem;width: 2.75rem;border-radius: 1.375rem;overflow: hidden;">
											<img src="img/head3.jpeg" width="100%" height="100%">
										</div>
									</div>
										<span style="float: left;margin: 0.55rem 0 0 0.3rem;font-family: arial black;font-size: 1.2rem;">像我这样的人</span>
								</td>
							</tr>
							<tr><td class="td2"><p>这题怎么写？急！急！急！求答案</p></td></tr>
							<tr><td class="td3"><a href="#" data-transition="slide"><div style="width: 92%;"><img src="./img/demo3.jpeg" width="100%"></div></a></td></tr>
							<tr><td class="td4"><div style="height: 1.7rem;width: 4rem;border: 1px solid #ababab;border-radius: 0.9rem;text-align: center;padding-top: 1.5%;margin-top: 2%;">#学习</div></td></tr>
							<tr><td class="td5">
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-pinglun">1</span></div>
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-xihuan" style="color: red;">3</span></div> 
							</td></tr>
						</div>
						
					</table>
					<!-- table2 -->
					<table class="tablestyle">
						<div style="margin-left: 10%;">
							<tr>
								<td class="td1">
									<div style="float: left;">
										<div style="height: 2.75rem;width: 2.75rem;border-radius: 1.375rem;overflow: hidden;">
											<img src="img/head6.jpeg" width="100%" height="100%">
										</div>
									</div>
										<span style="float: left;margin: 0.55rem 0 0 0.3rem;font-family: arial black;font-size: 1.2rem;">狂人Tom</span>
								</td>
							</tr>
							<tr><td class="td2"><p>求英语大佬</p></td></tr>
							<tr><td class="td3"><a href="#" data-transition="slide"><div style="width: 92%;"><img src="./img/demo5.jpg" width="100%"></div></a></td></tr>
							<tr><td class="td4"><div style="height: 1.7rem;width: 4rem;border: 1px solid #ababab;border-radius: 0.9rem;text-align: center;padding-top: 1.5%;margin-top: 2%;">#学习</div></td></tr>
							<tr><td class="td5">
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-pinglun">1</span></div>
							<div style="width: 45.5%;float: left;text-align: center;margin:3% 0 3% 0;"><span class="iconfont icon-xihuan" style="color: red;">3</span></div> 
							</td></tr>
						</div>
						
					</table>
				</div>
			</div>
			<!-- 底部导航栏 -->
			<div style="background-color: white;position: fixed;bottom: 0;z-index: 999;height: 3.5rem;width: 100%;">
				<span style="float: left;width: 50%;text-align: center;">
					<a href="#" data-role="none" style="text-decoration: none;">
						<div style="width: 100%;margin-top: 0.1rem;"><i class="icon-shouye1-copy"style="color: #7D7DE9;"></i></div>
					</a>
					
					<div style="width: 100%;font-size: 0.8rem;margin-top: -0.1rem;color: #7D7DE9;">首页</div>
				</span>
				<span style="float: left;width: 50%;text-align: center;">
					<a href="user.html" data-role="none" style="text-decoration: none;">
						<div style="width: 100%;margin-top: 0.1rem;"><i class="icon-gerenfill" style="color: black;"></i></div>
					</a>
					<div style="width: 100%;font-size: 0.8rem;margin-top: -0.1rem;">我的</div>
				</span>
			</div>
		</div>
	</body>
	<script>
		
	</script>
</html>
